<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>色值转换工具</title>
    <link rel="stylesheet" href="../../bootstrap/bootstrap.min.css">
</head>

<body>
    <div class="container mt-5">
        <h1 class="mb-4">色值转换工具</h1>
        <form class="mb-3">
            <div class="form-floating">
                <input class="form-control" placeholder="请输入颜色值" id="colorInput" type="text"
                    oninput="updatePreview(this.value)">
                <label for="colorInput">请输入颜色值</label>
            </div>
        </form>
        <button type="button" class="btn btn-primary" onclick="convertColor()">转换</button>
        <div class="mt-4">
            <div id="colorPreview"
                style="width: 100px; height: 100px; border-radius: 50%; background-color: #000; margin-bottom: 10px;">
            </div>
            <p>十六进制代码：<span id="hexCode"></span></p>
            <p>十六进制代码 (带透明度)：<span id="hexAlphaCode"></span></p>
            <p>RGB颜色值 (数字)：<span id="rgbValue"></span></p>
            <p>RGB颜色值 (百分比)：<span id="rgbPercentage"></span></p>
            <p>HSL颜色值：<span id="hslValue"></span></p>
            <p>HSV颜色值：<span id="hsvValue"></span></p>
        </div>
    </div>
    <script>
        function convertColor() {
            const colorInput = document.getElementById("colorInput").value;

            // 将输入的颜色值转换为 RGB 值
            let red, green, blue;
            if (colorInput.startsWith("#")) {
                // 处理 # 开头的十六进制颜色值
                if (colorInput.length === 4) {
                    red = parseInt(colorInput[1] + colorInput[1], 16);
                    green = parseInt(colorInput[2] + colorInput[2], 16);
                    blue = parseInt(colorInput[3] + colorInput[3], 16);
                } else if (colorInput.length === 7) {
                    red = parseInt(colorInput.slice(1, 3), 16);
                    green = parseInt(colorInput.slice(3, 5), 16);
                    blue = parseInt(colorInput.slice(5, 7), 16);
                }
            } else if (colorInput.startsWith("rgb")) {
                // 处理 rgb/rba 颜色值
                const matches = colorInput.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(,\s*([\d.]+%?))?\)$/i);
                if (matches) {
                    red = parseInt(matches[1]);
                    green = parseInt(matches[2]);
                    blue = parseInt(matches[3]);
                }
            } else if (colorInput.startsWith("hsl")) {
                // 处理 hsl/hsla 颜色值
                const matches = colorInput.match(/^hsla?\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)$/i);
                if (matches) {
                    const h = parseFloat(matches[1]) / 360;
                    const s = parseFloat(matches[2]) / 100;
                    const l = parseFloat(matches[3]) / 100;

                    let t1, t2, t3;
                    if (s === 0) {
                        red = green = blue = l; // achromatic
                    } else {
                        const hue2rgb = (p, q, t) => {
                            if (t < 0) t += 1;
                            if (t > 1) t -= 1;
                            if (t < 1 / 6) return p + (q - p) * 6 * t;
                            if (t < 1 / 2) return q;
                            if (t = 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
                            return p;
                        };

                        const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
                        const p = 2 * l - q;
                        red = hue2rgb(p, q, h + 1 / 3);
                        green = hue2rgb(p, q, h);
                        blue = hue2rgb(p, q, h - 1 / 3);
                    }
                    red = Math.round(red * 255);
                    green = Math.round(green * 255);
                    blue = Math.round(blue * 255);
                }
            }

            // 将 RGB 值转换为其他格式
            const hexCode = "#" + ((1 << 24) + (red << 16) + (green << 8) + blue).toString(16).slice(1);
            const hexAlphaCode = hexCode + "FF";
            const rgbValue = `rgb(${red}, ${green}, ${blue})`;
            const rgbPercentage = `rgb(${Math.round(red / 255 * 100)}%, ${Math.round(green / 255 * 100)}%, ${Math.round(blue / 255 * 100)}%)`;

            // 计算 HSL 值
            const r1 = red / 255, g1 = green / 255, b1 = blue / 255;
            const max1 = Math.max(r1, g1, b1), min1 = Math.min(r1, g1, b1);
            const d1 = max1 - min1;
            let h1, s1, l1 = (max1 + min1) / 2;
            if (d1 === 0) {
                h1 = 0;
                s1 = 0;
            } else {
                s1 = l1 > 0.5 ? d1 / (2 - max1 - min1) : d1 / (max1 + min1);
                if (max1 === r1) {
                    h1 = (g1 - b1) / d1 + (g1 < b1 ? 6 : 0);
                } else if (max1 === g1) {
                    h1 = (b1 - r1) / d1 + 2;
                } else {
                    h1 = (r1 - g1) / d1 + 4;
                }
                h1 /= 6;
            }
            const hslValue = `hsl(${Math.round(h1 * 360)}, ${Math.round(s1 * 100)}%, ${Math.round(l1 * 100)}%)`;

            // 计算 HSV 值
            const r2 = red / 255, g2 = green / 255, b2 = blue / 255;
            const max2 = Math.max(r2, g2, b2), min2 = Math.min(r2, g2, b2);
            const d2 = max2 - min2;
            let h2, s2, v2 = max2;
            if (d2 === 0) {
                h2 = 0;
                s2 = 0;
            } else {
                s2 = max2 === 0 ? 0 : d2 / max2;
                if (max2 === r2) {
                    h2 = (g2 - b2) / d2 + (g2 < b2 ? 6 : 0);
                } else if (max2 === g2) {
                    h2 = (b2 - r2) / d2 + 2;
                } else {
                    h2 = (r2 - g2) / d2 + 4;
                }
                h2 /= 6;
            }
            const hsvValue = `hsv(${Math.round(h2 * 360)}, ${Math.round(s2 * 100)}%, ${Math.round(v2 * 100)}%)`;

            // 更新页面显示的结果
            document.getElementById("hexCode").innerHTML = hexCode;
            document.getElementById("hexAlphaCode").innerHTML = hexAlphaCode;
            document.getElementById("rgbValue").innerHTML = rgbValue;
            document.getElementById("rgbPercentage").innerHTML = rgbPercentage;
            document.getElementById("hslValue").innerHTML = hslValue;
            document.getElementById("hsvValue").innerHTML = hsvValue;
        }

        function updatePreview(colorInput) {
            const colorPreview = document.getElementById("colorPreview");
            if (colorInput.startsWith("#")) {
                colorPreview.style.backgroundColor = colorInput;
            } else if (colorInput.startsWith("rgb")) {
                colorPreview.style.backgroundColor = colorInput;
            } else if (colorInput.startsWith("hsl")) {
                colorPreview.style.backgroundColor = colorInput;
            }
        }

    </script>
</body>

</html>